<template>
  <div class="tab-bar">
    <ul>
      <li class="tab-nav" @click="jumpTo('index')" :class="path==='/index.html' ? 'active' : ''">
        <span class="iconfont icon-homepage_fill"></span>
        <p>首页</p>
      </li>
      <li class="tab-nav" @click="jumpTo('category')" :class="path==='/category.html' ? 'active' : ''">
        <span class="iconfont icon-manage_fill"></span>
        <p>分类</p>
      </li>
      <li class="tab-nav" @click="jumpTo('cart')" :class="path==='/cart.html' ? 'active' : ''">
        <span class="iconfont icon-publishgoods_fill"></span>
        <p>购物车</p>
      </li>
      <li class="tab-nav" @click="jumpTo('user')" :class="path==='/user.html' ? 'active' : ''">
        <span class="iconfont icon-addressbook_fill"></span>
        <p>会员中心</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      path: this.$route.path
    }
  },
  methods: {
    jumpTo (name) {
      this.$router.push({name: name})
    }
  }
}
</script>
<style lang="scss" scoped>
  .tab-bar{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    ul{
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      text-align: center;
      background-color: #006699;
      color: #fff;
      li{
        width: 25%;
        padding: 6px 0;
        font-size: 14px;
        i{
          color: #fff;
          display: inline-block;
          width: 20px;
          height: 20px;
          margin-bottom: 2px;
          font-size: 16px;
        }
        p{
          margin: 0;
          padding: 0;
        }
      }
      .active{
        color:darkorange
      }
    }
  }
</style>
